React useEvent: Stabilizacja Obsługi Zdarzeń dla Solidnych Aplikacji

Użycie `useEvent` w Praktyce

Wróćmy do poprzednich przykładów i zastosujmy `useEvent` w celu rozwiązania problemów.

Naprawianie Nieaktualnych Domknięć

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Teraz `handleClick` jest stabilną funkcją, ale po wywołaniu uzyskuje dostęp do najnowszej wartości `count` za pośrednictwem referencji. Zapobiega to problemowi nieaktualnego domknięcia.

Zapobieganie Niepotrzebnym Ponownym Renderowaniom

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Ponieważ `handleClick` jest teraz stabilną referencją do funkcji, `ChildComponent` zostanie ponownie wyrenderowany tylko wtedy, gdy jego propsy *faktycznie* się zmienią, co poprawia wydajność.

Alternatywne Implementacje i Rozważania

`useEvent` z `useLayoutEffect`

W niektórych przypadkach może być konieczne użycie `useLayoutEffect` zamiast `useEffect` w implementacji `useEvent`. `useLayoutEffect` uruchamia się synchronicznie po wszystkich mutacjach DOM, ale zanim przeglądarka zdąży namalować. Może to być ważne, jeśli obsługa zdarzeń musi odczytać lub zmodyfikować DOM natychmiast po wyzwoleniu zdarzenia. To dostosowanie zapewnia, że przechwytujesz najbardziej aktualny stan DOM w swojej obsłudze zdarzeń, zapobiegając potencjalnym niespójnościom między tym, co wyświetla komponent, a danymi, których używa. Wybór między `useEffect` a `useLayoutEffect` zależy od konkretnych wymagań obsługi zdarzeń i czasu aktualizacji DOM.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Zastrzeżenia i Potencjalne Problemy

• Złożoność: Chociaż `useEvent` rozwiązuje konkretne problemy, dodaje warstwę złożoności do kodu. Ważne jest, aby zrozumieć podstawowe koncepcje, aby efektywnie z niego korzystać.
• Nadmierne użycie: Nie używaj `useEvent` bezkrytycznie. Stosuj go tylko wtedy, gdy napotykasz nieaktualne domknięcia lub niepotrzebne ponowne renderowania związane z obsługą zdarzeń.
• Testowanie: Testowanie komponentów, które używają `useEvent`, wymaga szczególnej uwagi, aby upewnić się, że wykonywana jest prawidłowa logika obsługi. Może być konieczne zamockowanie hooka `useEvent` lub bezpośredni dostęp do `handlerRef` w testach.

Globalne Perspektywy Obsługi Zdarzeń

Podczas tworzenia aplikacji dla globalnej publiczności kluczowe jest uwzględnienie różnic kulturowych i wymagań dostępności w obsłudze zdarzeń:

• Nawigacja Klawiaturą: Upewnij się, że wszystkie interaktywne elementy są dostępne za pomocą nawigacji klawiaturą. Użytkownicy w różnych regionach mogą polegać na nawigacji klawiaturą z powodu niepełnosprawności lub osobistych preferencji.
• Zdarzenia Dotyku: Obsługuj zdarzenia dotyku dla użytkowników na urządzeniach mobilnych. Weź pod uwagę regiony, w których dostęp do internetu mobilnego jest bardziej rozpowszechniony niż dostęp stacjonarny.
• Metody Wprowadzania Danych: Pamiętaj o różnych metodach wprowadzania danych używanych na całym świecie, takich jak chińskie, japońskie i koreańskie metody wprowadzania. Przetestuj swoją aplikację z tymi metodami, aby upewnić się, że zdarzenia są obsługiwane prawidłowo.
• Dostępność: Zawsze postępuj zgodnie z najlepszymi praktykami dostępności, upewniając się, że Twoje obsługi zdarzeń są kompatybilne z czytnikami ekranu i innymi technologiami wspomagającymi. Jest to szczególnie ważne dla inkluzywnych doświadczeń użytkownika w różnorodnych środowiskach kulturowych.
• Strefy Czasowe i Formaty Daty/Godziny: Podczas pracy ze zdarzeniami, które obejmują daty i godziny (np. narzędzia do planowania, kalendarze spotkań), pamiętaj o strefach czasowych i formatach daty/godziny używanych w różnych regionach. Zapewnij użytkownikom opcje dostosowania tych ustawień w oparciu o ich lokalizację.

Alternatywy dla `useEvent`

Chociaż `useEvent` jest potężną techniką, istnieją alternatywne podejścia do zarządzania obsługą zdarzeń w React:

• Podnoszenie Stanu (Lifting State): Czasami najlepszym rozwiązaniem jest przeniesienie stanu, od którego zależy obsługa zdarzeń, do komponentu wyższego poziomu. Może to uprościć obsługę zdarzeń i wyeliminować potrzebę stosowania `useEvent`.
• `useReducer`:** Jeśli logika stanu Twojego komponentu jest złożona, `useReducer` może pomóc zarządzać aktualizacjami stanu bardziej przewidywalnie i zmniejszyć prawdopodobieństwo wystąpienia nieaktualnych domknięć.
• Komponenty Klasowe: Chociaż rzadziej spotykane w nowoczesnym React, komponenty klasowe zapewniają naturalny sposób wiązania obsługi zdarzeń z instancją komponentu, unikając problemu domknięcia.
• Funkcje Wbudowane z Zależnościami: Używaj wywołań funkcji wbudowanych z zależnościami, aby upewnić się, że do obsługi zdarzeń przekazywane są świeże wartości. `onClick={() => handleClick(arg1, arg2)}` z `arg1` i `arg2` aktualizowanymi za pośrednictwem stanu utworzy nową anonimową funkcję przy każdym renderowaniu, zapewniając w ten sposób aktualne wartości domknięcia, ale spowoduje niepotrzebne ponowne renderowanie, czyli to, co rozwiązuje `useEvent`.